<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            outline: none;
            border:0;
            width: 150px;
            height: 30px;
            background: linear-gradient(90deg,#1596fb,#002dff);
            border-radius: .28571429rem;
            display: block;
            color: #fff;
            cursor:pointer;
        }
        .aa{
            background-color: rgba(0, 0, 0, .6);
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bb{
            border-radius: 10px;
            background-color: #fff;
            width: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div id="root">
        <button @click="ni=true">打开模态框</button>
        <add :wen="ni" @yi="hua"></add>
    </div>
    <template id="add">
        <div class="aa" v-if="wen" key="div">
            <div class="bb">
                <p class="cc">你好</p>
                <p class="cc">不好</p>
                <div class="dd">
                    <button @click="hua">确定</button>
                </div>
            </div>
        </div>
    </template>
    <script src="http://unpkg.zhimg.com/vue@2"></script>
    <script>
        Vue.component('add',{
            template:'#add',
            props:{
                wen:{
                    type:Boolean,
                    default(){
                        return false
                    }
                }
            },
            methods:{
                hua(){
                    this.$emit('yi')
                }
            }

        })
    const vm = new Vue({
    el: "#root",
        data: {
            ni:false
        },
        methods:{
            hua(){
                this.ni=false
            }
        }
    })
    </script>

</body>
</html>